/**
 * SD-LoRA校园图片生成系统 - 聊天功能
 */

// DOM元素
const chatArea = document.getElementById('chatArea');
const userInput = document.getElementById('userInput');
const sendBtn = document.getElementById('sendBtn');
const imageModal = document.getElementById('imageModal');
const modalImage = document.getElementById('modalImage');
const closeModal = document.querySelector('.close-modal');
const downloadBtn = document.getElementById('downloadBtn');
const exampleCards = document.querySelectorAll('.example-card');

// WebSocket连接
const socket = io();
let currentMessageId = null;
let currentSessionId = sessionId || null;
let currentMode = window.initialMode || 'chat'; // 支持从页面初始化模式
let currentModel = 'deepseek-chat'; // 当前模型：deepseek-chat或deepseek-reasoner
let currentStreamSource = null; // 当前SSE连接

// 滚动控制变量
let userHasScrolled = false;
let autoScrollEnabled = true;
let lastScrollTop = 0;
let lastScrollTime = 0;
let scrollTimeout = null;
let scrollLockCounter = 0; // 连续滚动计数器

// 为sidebar.js导出当前会话ID
window.chatModule = {
    getCurrentSessionId: function() {
        return currentSessionId;
    },
    setMode: function(mode) {
        currentMode = mode;
        // 模式切换时可能需要更新UI
        updateUIForMode(mode);
    },
    setModel: function(model) {
        currentModel = model;
    },
    getMode: function() {
        return currentMode;
    },
    getModel: function() {
        return currentModel;
    },
    toggleReasoningMode: function(enabled) {
        toggleReasoningMode(enabled);
    }
};

// 更新UI以适应当前模式
function updateUIForMode(mode) {
    const reasoningToggle = document.getElementById('reasoningToggle');
    if (reasoningToggle) {
        // 只在对话模式下显示"深度思考"按钮
        reasoningToggle.style.display = mode === 'chat' ? 'flex' : 'none';
    }
    
    // 更新输入框提示
    const placeholder = mode === 'chat' 
        ? '输入消息，与AI对话...' 
        : '描述您想要生成的图片...';
    
    if (userInput) {
        userInput.placeholder = placeholder;
    }
    
    // 更新页面标题
    const chatTitle = document.querySelector('.chat-title');
    if (chatTitle) {
        chatTitle.textContent = mode === 'chat' ? '对话生成' : '智慧绘画';
    }
}

// 添加智能提示词列表
const promptSuggestions = [
    "生成赛博朋克风格的城市景观，霓虹灯光与悬浮交通工具",
    "请生成Python爬虫脚本：自动抓取电商平台价格数据步",
    "生成科技行业分析报告：2024年AI芯片发展趋势",
    "根据《三体》黑暗森林理论生成科幻概念图+世界观设定",
    "生成智慧农场物联网系统架构图+传感器部署代码",
    "生成元宇宙时装秀：可穿戴数字服饰+秀场脚本",
];

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    // 设置后端URL，用于加载图片资源
    window.backendUrl = 'http://127.0.0.1:5000';
    console.log("设置后端URL:", window.backendUrl);
    
    // 如果有会话ID，加载该会话历史
    const urlParams = new URLSearchParams(window.location.search);
    currentSessionId = urlParams.get('session_id');
    
    if (currentSessionId) {
        loadSessionHistory(currentSessionId).then(() => {
            // 会话加载完成后，检查页面路径与会话模式是否匹配
            const currentPath = window.location.pathname;
            const isDrawPage = currentPath.includes('/draw');
            
            // 如果页面类型与会话模式不匹配，重定向到正确的页面
            if ((currentMode === 'draw' && !isDrawPage) || (currentMode === 'chat' && isDrawPage)) {
                const correctPath = currentMode === 'draw' ? '/draw' : '/chat';
                window.location.href = `${correctPath}?session_id=${currentSessionId}`;
            }
        });
    } else {
        // 移除加载动画（如果存在）
        const loadingChat = document.querySelector('.loading-chat');
        if (loadingChat) {
            loadingChat.remove();
        }
    }
    
    // 创建深度思考按钮并添加到输入区域（仅对话模式）
    if (currentMode === 'chat') {
        const inputArea = document.querySelector('.input-area');
        if (inputArea) {
            const reasoningToggle = document.createElement('div');
            reasoningToggle.className = 'reasoning-toggle';
            reasoningToggle.id = 'reasoningToggle';
            reasoningToggle.title = '启用/禁用深度思考';
            
            const reasoningIcon = document.createElement('i');
            reasoningIcon.className = 'material-icons';
            reasoningIcon.textContent = 'psychology';
            
            const reasoningLabel = document.createElement('span');
            reasoningLabel.textContent = '深度思考';
            
            reasoningToggle.appendChild(reasoningIcon);
            reasoningToggle.appendChild(reasoningLabel);
            
            // 点击切换深度思考模式
            reasoningToggle.addEventListener('click', () => {
                const isActive = reasoningToggle.classList.toggle('active');
                toggleReasoningMode(isActive);
            });
            
            inputArea.appendChild(reasoningToggle);
        }
    }

    // 添加输入事件监听
    userInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    });

    // 发送按钮点击事件
    sendBtn.addEventListener('click', sendMessage);

    // 示例卡片点击事件
    exampleCards.forEach(card => {
        card.addEventListener('click', () => {
            const prompt = card.getAttribute('data-prompt');
            if (prompt) {
                userInput.value = prompt;
                userInput.focus();
                
                // 如果是首页，点击示例卡片后清除欢迎界面
                const welcomeScreen = document.querySelector('.welcome-screen');
                if (welcomeScreen) {
                    welcomeScreen.remove();
                }
            }
        });
    });

    // 自动调整输入框高度
    userInput.addEventListener('input', () => {
        adjustTextareaHeight(userInput);
        showPromptSuggestions(userInput.value);
    });

    // 输入框获得焦点时显示提示
    userInput.addEventListener('focus', () => {
        if (userInput.value.trim() === '') {
            showPromptSuggestions('');
        }
    });

    // 输入框失去焦点时隐藏提示
    userInput.addEventListener('blur', () => {
        // 延迟隐藏，以便可以点击提示
        setTimeout(() => {
            const suggestionBox = document.querySelector('.prompt-suggestions');
            if (suggestionBox) {
                suggestionBox.classList.remove('visible');
            }
        }, 200);
    });

    // 模态框相关事件
    closeModal.addEventListener('click', () => {
        imageModal.classList.remove('active');
    });

    // 下载按钮点击事件 - 采用chat-fix.js的实现
    downloadBtn.addEventListener('click', function(e) {
        e.preventDefault();
        console.log('下载按钮被点击');
        
        if (!modalImage || !modalImage.src) {
            alert('无法下载图片：未找到图片URL');
            return;
        }
        
        const imageUrl = modalImage.src;
        console.log('图片URL:', imageUrl);
        
        // 生成唯一的文件名 (使用英文名称避免编码问题)
        const timestamp = new Date().getTime();
        const fileName = `campus_image_${timestamp}.png`;
        
        // 方法1: 直接从图片URL获取blob并下载
        fetch(imageUrl)
            .then(response => {
                if (!response.ok) {
                    throw new Error('获取图片失败');
                }
                return response.blob();
            })
            .then(blob => {
                // 创建blob URL
                const blobUrl = URL.createObjectURL(blob);
                
                // 创建一个临时的a标签来触发下载
                const a = document.createElement('a');
                a.href = blobUrl;
                a.download = fileName;
                a.style.display = 'none';
                
                // 添加到文档并点击
                document.body.appendChild(a);
                a.click();
                
                // 清理
                setTimeout(() => {
                    document.body.removeChild(a);
                    URL.revokeObjectURL(blobUrl);
                }, 100);
            })
            .catch(error => {
                console.error('直接下载失败，尝试使用服务器代理:', error);
                
                // 备用方法: 使用服务器端代理下载API
                const downloadUrl = `/api/download-image?url=${encodeURIComponent(imageUrl)}`;
                console.log('使用下载API:', downloadUrl);
                
                // 直接打开下载链接
                window.location.href = downloadUrl;
            });
    });

    // 点击模态框外部关闭
    imageModal.addEventListener('click', (e) => {
        if (e.target === imageModal) {
            imageModal.classList.remove('active');
        }
    });
    
    // 初始化界面模式
    updateUIForMode(currentMode);
    
    // 监听处理状态事件
    socket.on('processing_status', (data) => {
        // 确保消息与当前会话相关
        if (data.session_id && data.session_id === currentSessionId) {
            // 获取最后一条AI消息
            const aiMessages = document.querySelectorAll('.ai-message');
            if (aiMessages.length > 0) {
                const lastMessage = aiMessages[aiMessages.length - 1];
                const thinkingDiv = lastMessage.querySelector('.thinking');
                
                // 根据状态更新UI
                switch(data.status) {
                    case 'started':
                        if (thinkingDiv) {
                            thinkingDiv.innerHTML = '<span></span><span></span><span></span>';
                        }
                        break;
                    case 'retrying':
                        if (thinkingDiv) {
                            thinkingDiv.innerHTML = `<span>正在重试 (${data.retry}/${data.max_retries})</span><span>.</span><span>.</span><span>.</span>`;
                        }
                        break;
                    case 'connection_error':
                        if (thinkingDiv) {
                            thinkingDiv.innerHTML = `<span>连接错误，正在重试 (${data.retry}/${data.max_retries})</span><span>.</span><span>.</span><span>.</span>`;
                        }
                        break;
                    case 'failed':
                        // 失败状态由API响应处理
                        break;
                    case 'completed':
                        // 完成状态由API响应处理
                        break;
                }
            }
        }
    });
    
    // 添加滚动事件监听
    if (chatArea) {
        // 鼠标滚轮事件 - 最早捕获用户滚动意图
        chatArea.addEventListener('wheel', (e) => {
            // 只要向上滚动，立即锁定自动滚动
            if (e.deltaY < 0) {
                userHasScrolled = true;
                scrollLockCounter = 10; // 设置足够高的锁定计数
                e.stopPropagation(); // 阻止事件冒泡
            }
        }, { passive: false });
        
        // 滚动事件
        chatArea.addEventListener('scroll', () => {
            const currentScrollTop = chatArea.scrollTop;
            
            // 检测向上滚动
            if (currentScrollTop < lastScrollTop) {
                userHasScrolled = true;
                scrollLockCounter = 5;
            }
            
            // 检测是否滚动到底部或接近底部（10px内）
            const isAtBottom = chatArea.scrollHeight - chatArea.scrollTop - chatArea.clientHeight < 10;
            if (isAtBottom) {
                userHasScrolled = false;
                scrollLockCounter = 0;
            }
            
            lastScrollTop = currentScrollTop;
        });
        
        // 触摸事件支持
        chatArea.addEventListener('touchstart', () => {
            userHasScrolled = true; // 用户触摸时暂时禁止自动滚动
        });
    }
});

/**
 * 智能滚动到底部
 * 只在用户未手动滚动或明确要求时滚动
 * @param {boolean} force - 是否强制滚动，忽略用户滚动状态
 */
function scrollToBottom(force = false) {
    // 如果有滚动锁定计数，减少并阻止滚动
    if (scrollLockCounter > 0) {
        scrollLockCounter--;
        return;
    }
    
    // 仅在用户未主动滚动或强制滚动时执行
    if (force || !userHasScrolled) {
        // 使用RequestAnimationFrame确保在下一帧渲染前执行滚动
        requestAnimationFrame(() => {
            chatArea.scrollTop = chatArea.scrollHeight;
        });
    }
}

/**
 * 发送用户消息
 */
function sendMessage() {
    const message = userInput.value.trim();
    if (!message) return;

    // 清除欢迎界面（如果存在）
    const welcomeScreen = document.querySelector('.welcome-screen');
    if (welcomeScreen) {
        welcomeScreen.remove();
    }
    
    // 不再自动检测绘图请求
    // 保持用户选择的当前模式

    // 显示用户消息
    displayUserMessage(message);
    
    // 清空输入框并禁用
    userInput.value = '';
    userInput.disabled = true;
    sendBtn.classList.add('loading');

    // 关闭之前的SSE连接（如果有）
    if (currentStreamSource) {
        currentStreamSource.close();
        currentStreamSource = null;
    }
    
    // 创建空的AI消息元素，思考中状态会在useStreamingAPI中添加
    const aiMessageElement = document.createElement('div');
    aiMessageElement.className = 'ai-message';
    
    // 添加时间元素
    const timeElement = document.createElement('div');
    timeElement.className = 'message-time';
    timeElement.textContent = getCurrentTime();
    aiMessageElement.appendChild(timeElement);
    
    // 添加到聊天区域
    chatArea.appendChild(aiMessageElement);
    
    // 用户发送消息时，重置滚动状态并强制滚动到底部
    userHasScrolled = false;
    scrollLockCounter = 0;
    scrollToBottom(true);
    
    // 使用流式API
    useStreamingAPI(message, aiMessageElement);
}
    
/**
 * 使用流式API发送消息
 * @param {string} message - 用户消息
 * @param {Element} aiMessageElement - AI消息元素
 */
function useStreamingAPI(message, aiMessageElement) {
    // 检查当前页面是否是绘画页面
    const isDrawPage = window.location.pathname.includes('/draw');
    if (isDrawPage) {
        // 如果是绘画页面，强制设置模式为"draw"
        currentMode = 'draw';
    }
    
    // 获取高级设置参数(如果在绘画模式下)
    let advancedSettings = null;
    if (currentMode === 'draw') {
        // 获取用户设置的参数
        const width = document.getElementById('width')?.value;
        const height = document.getElementById('height')?.value;
        const userBatchSize = document.getElementById('batch_size')?.value;
        const steps = document.getElementById('steps')?.value;
        const guidanceScale = document.getElementById('guidance_scale')?.value;
        const samplerIndex = document.getElementById('sampler_name')?.value;
        const modelCheckpointValue = document.getElementById('model_checkpoint')?.value;
        const enableHRValue = document.getElementById('enable_hr')?.checked;
        
        // 只有在绘画模式下且所有元素都存在时才创建高级设置
        if (width && height && userBatchSize && steps && guidanceScale) {
            advancedSettings = {
                width: parseInt(width),
                height: parseInt(height),
                batch_size: parseInt(userBatchSize),
                steps: parseInt(steps),
                guidance_scale: parseFloat(guidanceScale),
                sampler_index: samplerIndex,
                enable_hr: enableHRValue,
                hr_scale: 2,
                hr_upscaler: "ESRGAN_4x",
                hr_second_pass_steps: 15,
                denoising_strength: 0.3,
                sd_model_checkpoint: modelCheckpointValue
            };
            
            console.log("流式API绘画高级设置:", advancedSettings);
        }
    }
    
    // 创建思考中的动画
    const thinkingDiv = document.createElement('div');
    thinkingDiv.className = 'thinking';
    thinkingDiv.innerHTML = '<span></span><span></span><span></span>';
    aiMessageElement.appendChild(thinkingDiv);
    
    // 初始化变量
    let contentDiv = null; // DOM元素：消息内容
    let currentCursor = null; // DOM元素：光标
    let reasoningContentText = ''; // 存储推理内容文本
    let reasoningContentElement = null; // 存储推理内容DOM元素
    let isShowingReasoning = false; // 是否正在显示推理内容
    let reasoningBox = null; // DOM元素：推理框
    let reasoningComplete = false; // 标记推理内容是否已完成
    
    // 显示新的AI消息元素时，重置用户滚动状态并强制滚动
    userHasScrolled = false;
    scrollLockCounter = 0;
    scrollToBottom(true);
    
    // 构建URL参数
    let url = `/api/deepseek/stream?message=${encodeURIComponent(message)}&mode=${currentMode}&model=${currentModel}`;
    if (currentSessionId) {
        url += `&session_id=${currentSessionId}`;
    }
    
    // 添加高级设置参数(如果有)
    if (advancedSettings) {
        url += `&advanced_settings=${encodeURIComponent(JSON.stringify(advancedSettings))}`;
    }
    
    // 创建EventSource
    const eventSource = new EventSource(url);
    currentStreamSource = eventSource;
    
    // 速率检测变量
    let isReceivingFast = false;
    let lastReceiveTime = Date.now();
    let receiveCount = 0;
    
    // 定期检查接收速率
    const receiveRateChecker = setInterval(() => {
        const now = Date.now();
        const elapsed = now - lastReceiveTime;
        if (elapsed > 1000) { // 如果超过1秒没有新数据
            isReceivingFast = false;
            receiveCount = 0;
        }
    }, 1000);
    
    // 将定时器暴露为全局变量，以便修复脚本可以访问
    window.receiveRateChecker = receiveRateChecker;
    
    // 处理字符队列的函数
    function processCharQueue(targetElement = currentCursor?.parentElement, targetCursor = currentCursor) {
        if (charQueue.length === 0) {
            isProcessing = false;
            return;
        }
        
        // 确保目标元素和光标存在
        if (!targetElement) {
            console.error("处理字符队列错误: 目标元素不存在");
            isProcessing = false;
            return;
        }
        
        isProcessing = true;
        const { char, target, isReasoning } = charQueue.shift();
        
        try {
            // 处理换行符
            if (char === '\n') {
                if (isReasoning) {
                    // 推理内容中的换行符直接插入文本节点
                    const textNode = document.createTextNode('\n');
                    targetElement.appendChild(textNode);
                } else if (targetCursor) {
                    // 在当前段落中插入<br>
                    targetElement.insertBefore(document.createElement('br'), targetCursor);
                } else {
                    // 如果没有光标但有目标元素，直接添加到目标元素
                    targetElement.appendChild(document.createElement('br'));
                }
            } else {
                // 添加普通文本
                const textNode = document.createTextNode(char);
                if (isReasoning) {
                    // 推理内容直接添加到目标元素末尾
                    targetElement.appendChild(textNode);
                } else if (targetCursor) {
                    // 有光标时，在光标前插入
                    targetElement.insertBefore(textNode, targetCursor);
                } else {
                    // 没有光标但有目标元素，直接添加到目标元素
                    targetElement.appendChild(textNode);
                }
            }
            
            // 减少滚动频率，只在处理多个字符后尝试滚动
            if (charQueue.length % 20 === 0) {
                scrollToBottom();
            }
        } catch (err) {
            console.error("添加字符到DOM时出错:", err);
        }
        
        // 控制打字速度
        // 为了更自然的打字机效果，根据字符类型调整延迟
        let delay;
        if (char === '，' || char === ',' || char === '、') {
            delay = Math.floor(Math.random() * 10) + 30; // 30-40ms - 逗号短暂停顿
        } else if (char === '。' || char === '.' || char === '！' || char === '?' || char === '？' || char === '!') {
            delay = Math.floor(Math.random() * 15) + 40; // 40-55ms - 句号较长停顿
        } else if (char === ' ') {
            delay = Math.floor(Math.random() * 5) + 10; // 10-15ms - 空格短停顿
        } else {
            delay = Math.floor(Math.random() * 5) + 5; // 5-10ms - 普通字符
        }
        
        // 自适应速度调整：根据当前接收数据速率调整打字速度
        if (isReceivingFast || charQueue.length > 30) {
            // 数据接收快或队列长，加速打字
            delay = Math.max(1, delay / 3);
        } else if (charQueue.length > 10) {
            // 队列有一定长度，适度加速
            delay = Math.max(1, delay / 2);
        } else if (charQueue.length < 5) {
            // 队列快空了，可以放慢速度
            delay = delay * 1.2;
        }
        
        // 无论如何都要开始下一个字符的处理
        setTimeout(function() {
            // 检查元素是否仍然在DOM中
            if (document.body.contains(targetElement)) {
                processCharQueue(targetElement, targetCursor);
            } else {
                console.log("目标元素已从DOM中移除，停止处理");
                isProcessing = false;
            }
        }, delay);
    }
    
    // 创建推理框的函数
    function createReasoningBox() {
        console.log("创建深度思考区域");
        if (!reasoningBox) {
            try {
                // 创建推理内容区域
                reasoningBox = document.createElement('div');
                reasoningBox.className = 'reasoning-box';
                
                // 创建标题
                const title = document.createElement('div');
                title.className = 'reasoning-title expanded'; // 默认展开状态
                title.innerHTML = '<i class="material-icons">psychology</i>深度思考过程<span class="thinking-dots"><span>.</span><span>.</span><span>.</span></span>';
                
                // 创建内容
                reasoningContentElement = document.createElement('div');
                reasoningContentElement.className = 'reasoning-content faded-text';
                reasoningContentElement.style.display = 'block'; // 默认展开显示
                
                // 添加展开/折叠功能
                title.addEventListener('click', () => {
                    if (reasoningContentElement.style.display === 'none') {
                        reasoningContentElement.style.display = 'block';
                        title.classList.add('expanded');
                    } else {
                        reasoningContentElement.style.display = 'none';
                        title.classList.remove('expanded');
                    }
                });
                
                // 组装
                reasoningBox.appendChild(title);
                reasoningBox.appendChild(reasoningContentElement);
                
                // 添加到消息元素中 - 放在普通内容之前
                if (aiMessageElement) {
                    aiMessageElement.insertBefore(reasoningBox, aiMessageElement.firstChild);
                } else {
                    console.error("找不到AI消息元素，无法添加深度思考区域");
                    return null;
                }
                
                console.log("深度思考区域创建成功");
                return reasoningContentElement;
            } catch (err) {
                console.error("创建深度思考区域时出错:", err);
                return null;
            }
        } else {
            console.log("深度思考区域已存在");
            return reasoningContentElement;
        }
    }
    
    // 事件处理
    eventSource.onmessage = (event) => {
        try {
            // 更新接收速率检测
            lastReceiveTime = Date.now();
            receiveCount++;
            if (receiveCount > 5) {
                isReceivingFast = true;
            }
            
            const data = JSON.parse(event.data);
            console.log("接收到SSE事件:", data.type); // 调试输出
            
            // 处理不同类型的消息
            switch (data.type) {
                case 'reasoning_start':
                    // 移除思考中动画
                    if (thinkingDiv && thinkingDiv.parentNode) {
                        thinkingDiv.remove();
                    }
                    
                    // 开始显示推理内容
                    isShowingReasoning = true;
                    
                    // 创建推理框(如果不存在)
                    if (!reasoningBox) {
                        reasoningContentElement = createReasoningBox();
                        console.log("创建了推理内容元素:", reasoningContentElement);
                    }
                    break;
                    
                case 'reasoning_chunk':
                    // 添加推理内容
                    if (isShowingReasoning) {
                        reasoningContentText += data.content;
                        console.log("接收到推理块:", data.content.length); // 调试输出
                        
                        // 确保推理区域存在
                        if (!reasoningBox || !reasoningContentElement) {
                            console.log("推理区域不存在，创建新的推理区域");
                            reasoningContentElement = createReasoningBox();
                        }
                        
                        // 确保推理内容元素在DOM中
                        if (!reasoningContentElement || !document.body.contains(reasoningContentElement)) {
                            console.warn("推理内容元素不在DOM中，重新创建");
                            reasoningBox = null;
                            reasoningContentElement = createReasoningBox();
                        }

                        // 直接追加文本到元素
                        if (reasoningContentElement) {
                            const textNode = document.createTextNode(data.content);
                            reasoningContentElement.appendChild(textNode);
                        } else {
                            console.error("无法找到推理内容元素，无法显示推理块");
                        }
                    } else {
                        console.warn("收到推理块但推理模式未激活");
                    }
                    break;
                    
                case 'content_start':
                    // 从推理模式切换到内容模式
                    isShowingReasoning = false;
                    reasoningComplete = true;  // 标记推理内容已完成
                    
                    // 移除思考中动画
                    if (thinkingDiv && thinkingDiv.parentNode) {
                        thinkingDiv.remove();
                    }
                    
                    console.log("收到内容开始事件，准备显示对话内容");
                    
                    // 确保创建消息内容区域（如果不存在）
                    if (!contentDiv) {
                        contentDiv = document.createElement('div');
                        contentDiv.className = 'message-content';
                        aiMessageElement.appendChild(contentDiv);
                        console.log("创建了消息内容区域");
                    }
                    
                    // 创建光标（如果不存在）
                    if (!currentCursor) {
                        const cursor = document.createElement('span');
                        cursor.className = 'cursor';
                        contentDiv.appendChild(cursor);
                        currentCursor = cursor;
                        console.log("创建了打字光标");
                    }
                    
                    break;
                    
                case 'chunk':
                    // 如果推理还未完成，不处理普通内容块
                    if (!reasoningComplete && isShowingReasoning) {
                        console.log("推理尚未完成，暂不处理普通内容块");
                        return;
                    }
                    
                    // 确保思考中动画已移除
                    if (thinkingDiv && thinkingDiv.parentNode) {
                        thinkingDiv.remove();
                    }
                    
                    console.log("接收到内容块，长度:", data.content.length);
                    
                    // 确保创建消息内容区域（如果不存在）
                    if (!contentDiv) {
                        contentDiv = document.createElement('div');
                        contentDiv.className = 'message-content';
                        aiMessageElement.appendChild(contentDiv);
                        console.log("在chunk处理中创建了消息内容区域");
                        
                        // 创建光标
                        const cursor = document.createElement('span');
                        cursor.className = 'cursor';
                        contentDiv.appendChild(cursor);
                        currentCursor = cursor;
                        console.log("在chunk处理中创建了打字光标");
                    }
                    
                    // 将内容添加到DOM中
                    const textNode = document.createTextNode(data.content);
                    if (currentCursor && currentCursor.parentNode) {
                        // 有光标时，在光标前插入
                        currentCursor.parentNode.insertBefore(textNode, currentCursor);
                    } else if (contentDiv) {
                        // 没有光标但有内容区域，直接添加
                        contentDiv.appendChild(textNode);
                    }
                    
                    // 强制滚动到底部以保持可见性
                    scrollToBottom(true);
                    
                    break;
                
                case 'params_ready':
                    // 收到参数时立即显示，而不是等待图片生成完成
                    if (currentMode === 'draw' && data.generation_params) {
                        // 添加参数摘要，但不开始图片生成
                        const paramSummary = document.createElement('div');
                        paramSummary.className = 'params-summary';
                        paramSummary.innerHTML = `
                            <h4>生成参数</h4>
                            <ul>
                                <li>提示词：${data.generation_params.prompt || message}</li>
                                <li>图片数量：${data.generation_params.batch_size || 1}</li>
                                <li>图片尺寸：${data.generation_params.width || 512}x${data.generation_params.height || 512}</li>
                                <li>生成步数：${data.generation_params.steps || 30}</li>
                                <li>提示词引导强度：${data.generation_params.guidance_scale || 7.5}</li>
                                ${data.generation_params.sampler_index ? `<li>采样方法：${data.generation_params.sampler_index}</li>` : ''}
                                ${data.generation_params.override_settings?.sd_model_checkpoint ? `<li>模型：${data.generation_params.override_settings.sd_model_checkpoint}</li>` : ''}
                                ${data.generation_params.enable_hr ? `<li>超分辨率：已启用(${data.generation_params.hr_scale || 2}倍)</li>` : ''}
                            </ul>
                        `;
                        aiMessageElement.appendChild(paramSummary);
                        
                        // 添加临时的状态指示器，这个指示器ID标记为临时，以便后续移除
                        const tempStatusIndicator = document.createElement('div');
                        tempStatusIndicator.className = 'generation-status temp-status';
                        tempStatusIndicator.innerHTML = '<p>图片生成中，请耐心等待(可能需要1-3分钟)...</p>';
                        aiMessageElement.appendChild(tempStatusIndicator);
                    }
                    break;
                    
                case 'complete':
                    // 完成响应
                    console.log("收到完成事件");
                    
                    eventSource.close();
                    currentStreamSource = null;
                    
                    // 清除接收速率检测定时器
                    clearInterval(receiveRateChecker);
                    
                    // 更新会话ID
                    if (data.session_id && (!currentSessionId || currentSessionId === 'None')) {
                        currentSessionId = data.session_id;
                        console.log("更新会话ID:", currentSessionId);
                        // 更新URL但不刷新页面
                        const newUrl = window.location.pathname + '?session_id=' + currentSessionId;
                        window.history.pushState({ path: newUrl }, '', newUrl);
                    }
                    
                    // 移除光标（如果存在）
                    if (currentCursor) {
                        currentCursor.remove();
                        currentCursor = null;
                    }
                    
                    // 确保内容已显示
                    if (data.content && (!contentDiv || contentDiv.textContent.trim() === '')) {
                        console.log("在完成事件中显示内容:", data.content);
                        // 如果内容区域不存在或为空，则创建并添加完整内容
                        if (!contentDiv) {
                            contentDiv = document.createElement('div');
                            contentDiv.className = 'message-content';
                            aiMessageElement.appendChild(contentDiv);
                        }
                        
                        // 直接设置内容
                        contentDiv.textContent = data.content;
                    }
                    
                    // 处理图片生成
                    if (data.generation_params) {
                        // 检查当前是否在绘画页面
                        const isDrawPage = window.location.pathname.includes('/draw');
                        
                        // 如果是绘画模式或在绘画页面，则处理图片生成
                        if (currentMode === 'draw' || isDrawPage) {
                            // 首先移除临时状态指示器（如果存在）
                            const tempStatus = aiMessageElement.querySelector('.temp-status');
                            if (tempStatus) {
                                tempStatus.remove();
                            }
                            
                            // 使用生成参数生成图片
                            handleImageGeneration(aiMessageElement, data.generation_params);
                        }
                    }
                    
                    // 处理推理内容
                    // 只有当是深度思考模型时才处理推理内容
                    if (currentModel === 'deepseek-reasoner') {
                        console.log("处理深度思考模式的推理内容");
                        // 首先尝试使用已收集的推理内容
                        if (reasoningContentText && reasoningContentText.length > 0) {
                            console.log("使用已收集的推理内容:", reasoningContentText.length);
                            displayReasoningContent(aiMessageElement, reasoningContentText);
                        } 
                        // 如果没有收集到推理内容，尝试使用complete事件携带的推理内容
                        else if (data.reasoning_content) {
                            console.log("使用complete事件携带的推理内容:", data.reasoning_content.length);
                            displayReasoningContent(aiMessageElement, data.reasoning_content);
                        }
                        // 如果两者都没有，但确实是深度思考模型，显示一个默认的推理内容
                        else {
                            console.log("没有找到推理内容，使用默认内容");
                            const defaultReasoning = "由于网络或系统原因，无法获取完整的思考过程。";
                            displayReasoningContent(aiMessageElement, defaultReasoning);
                        }
                    }
                    
                    // 启用输入并移除加载状态
                    userInput.disabled = false;
                    sendBtn.classList.remove('loading');
                    userInput.focus();
                    
                    // 最后强制滚动到底部
                    scrollToBottom(true);
                    break;
                    
                case 'error':
                    // 错误处理
                    console.error("收到错误事件:", data.content);
                    
                    eventSource.close();
                    currentStreamSource = null;
                    
                    // 清除接收速率检测定时器
                    clearInterval(receiveRateChecker);
                    
                    // 确保创建消息内容区域（如果不存在）
                    if (!contentDiv) {
                        contentDiv = document.createElement('div');
                        contentDiv.className = 'message-content';
                        aiMessageElement.appendChild(contentDiv);
                    }
                    
                    // 显示错误消息
                    contentDiv.innerHTML = `<div class="error-message">错误: ${data.content}</div>`;
                    
                    // 移除思考中动画（如果存在）
                    if (thinkingDiv && thinkingDiv.parentNode) {
                        thinkingDiv.remove();
                    }
                    
                    // 启用输入并移除加载状态
                    userInput.disabled = false;
                    sendBtn.classList.remove('loading');
                    userInput.focus();
                    
                    // 强制滚动到底部
                    scrollToBottom(true);
                    break;
            }
        } catch (error) {
            console.error('Error parsing SSE data:', error);
        }
    };
    
    eventSource.onerror = (error) => {
        console.error('SSE连接错误:', error);
        
        // 关闭连接
        eventSource.close();
        currentStreamSource = null;
        
        // 清除定时器
        clearInterval(receiveRateChecker);
        
        // 确保创建消息内容区域（如果不存在）
        if (!contentDiv) {
            contentDiv = document.createElement('div');
            contentDiv.className = 'message-content';
            aiMessageElement.appendChild(contentDiv);
        }
        
        // 显示错误消息
        contentDiv.innerHTML = `<div class="error-message">连接错误，请稍后重试</div>`;
        
        // 检查并移除思考中动画
        if (thinkingDiv && thinkingDiv.parentNode) {
            thinkingDiv.remove();
        }
        
        // 如果是推理模型且已有收集的推理内容，显示已有内容
        if (currentModel === 'deepseek-reasoner' && reasoningContentText && reasoningContentText.length > 0) {
            displayReasoningContent(aiMessageElement, reasoningContentText);
        }
        
        // 启用输入并移除加载状态
        userInput.disabled = false;
        sendBtn.classList.remove('loading');
        userInput.focus();
        
        // 强制滚动到底部
        scrollToBottom(true);
    };
}

/**
 * 显示推理内容
 * @param {Element} messageElement - 消息元素
 * @param {string} reasoning - 推理内容
 */
function displayReasoningContent(messageElement, reasoning) {
    console.log("调用displayReasoningContent函数，内容长度:", reasoning ? reasoning.length : 0);
    
    if (!reasoning || reasoning.trim() === '') {
        console.warn("推理内容为空，不显示推理框");
        return;
    }
    
    try {
        // 检查是否已经有推理框，避免重复创建
        let existingBox = messageElement.querySelector('.reasoning-box');
        if (existingBox) {
            console.log("已存在推理框，更新内容");
            const content = existingBox.querySelector('.reasoning-content');
            if (content) {
                content.textContent = reasoning;
                return;
            }
        }
        
        // 创建新的推理内容区域
        const reasoningBox = document.createElement('div');
        reasoningBox.className = 'reasoning-box';
        
        // 创建标题
        const title = document.createElement('div');
        title.className = 'reasoning-title expanded'; // 默认展开状态
        title.innerHTML = '<i class="material-icons">psychology</i>深度思考过程';
        
        // 创建内容
        const content = document.createElement('div');
        content.className = 'reasoning-content faded-text';
        content.textContent = reasoning; // 设置推理内容文本
        content.style.display = 'block'; // 默认展开
        
        // 添加展开/折叠功能
        title.addEventListener('click', () => {
            if (content.style.display === 'none') {
                content.style.display = 'block';
                title.classList.add('expanded');
            } else {
                content.style.display = 'none';
                title.classList.remove('expanded');
            }
        });
        
        // 组装
        reasoningBox.appendChild(title);
        reasoningBox.appendChild(content);
        
        // 找到插入位置 - 插入到消息内容之前
        let insertBefore = messageElement.querySelector('.message-content');
        if (insertBefore) {
            messageElement.insertBefore(reasoningBox, insertBefore);
        } else {
            // 如果没有消息内容，则插入到消息元素开头
            messageElement.insertBefore(reasoningBox, messageElement.firstChild);
        }
        
        console.log("显示推理内容成功");
    } catch (err) {
        console.error("显示推理内容时发生错误:", err);
    }
}

/**
 * 显示用户消息
 * @param {string} message - 用户消息内容
 */
function displayUserMessage(message) {
    const messageDiv = document.createElement('div');
    messageDiv.className = 'user-message';
    
    const content = document.createElement('div');
    content.className = 'message-content';
    content.innerHTML = `<p>${escapeHtml(message)}</p>`;
    
    const timeElement = document.createElement('div');
    timeElement.className = 'message-time';
    timeElement.textContent = getCurrentTime();
    
    messageDiv.appendChild(content);
    messageDiv.appendChild(timeElement);
    chatArea.appendChild(messageDiv);
    
    // 用户消息总是强制滚动到底部
    userHasScrolled = false;
    scrollLockCounter = 0;
    scrollToBottom(true);
    
    return messageDiv;
}

/**
 * 显示AI消息
 * @param {string} message - AI消息内容
 */
function displayAIMessage(message) {
    const messageDiv = document.createElement('div');
    messageDiv.className = 'ai-message';
    
    const content = document.createElement('div');
    content.className = 'message-content';
    
    // 只有当消息不为空时才添加p标签
    if (message && message.trim() !== '') {
        content.innerHTML = `<p>${message}</p>`;
    }
    
    const timeElement = document.createElement('div');
    timeElement.className = 'message-time';
    timeElement.textContent = getCurrentTime();
    
    messageDiv.appendChild(content);
    messageDiv.appendChild(timeElement);
    chatArea.appendChild(messageDiv);
    
    // 显示AI消息时总是强制滚动到底部
    userHasScrolled = false;
    scrollLockCounter = 0;
    scrollToBottom(true);
    
    return messageDiv;
}

/**
 * 更新AI消息内容
 * @param {Element} messageElement - 消息元素
 * @param {string} message - 新消息内容
 */
function updateAIMessage(messageElement, message) {
    // 查找消息内容元素
    const contentElement = messageElement.querySelector('.message-content p');
    if (contentElement) {
        // 使用流式响应效果更新内容
        streamText(contentElement, message);
    }
}

/**
 * 流式显示文本
 * @param {Element} element - 要更新的元素
 * @param {string} text - 要显示的文本
 */
function streamText(element, text) {
    let index = 0;
    element.innerHTML = '';
    
    // 预处理文本，确保段落格式正确
    text = text.replace(/\n\s*\n/g, '\n\n'); // 确保段落之间有一致的空行
    text = text.replace(/\n{3,}/g, '\n\n'); // 限制最大连续换行数为2
    
    // 创建段落元素
    let paragraph = document.createElement('p');
    element.appendChild(paragraph);
    
    // 添加打字光标
    const cursor = document.createElement('span');
    cursor.className = 'typing-cursor';
    paragraph.appendChild(cursor);
    
    // 记录上次滚动的位置
    let lastScrollAttempt = 0;
    
    function addNextChar() {
        if (index < text.length) {
            const char = text[index];
            index++;
            
            // 处理换行符
            if (char === '\n') {
                // 检查是否是连续的两个换行符（段落分隔）
                if (index < text.length && text[index] === '\n') {
                    // 创建新段落
                    paragraph = document.createElement('p');
                    element.appendChild(paragraph);
                    paragraph.appendChild(cursor);
                    index++; // 跳过下一个换行符
                } else {
                    // 在同一段落内换行
                    paragraph.insertBefore(document.createElement('br'), cursor);
                }
            } else {
                // 在光标前插入新字符
                const textNode = document.createTextNode(char);
                paragraph.insertBefore(textNode, cursor);
            }
            
            // 控制速度，稍微随机化使其更自然
            const delay = Math.floor(Math.random() * 20) + 10;
            setTimeout(addNextChar, delay);
            
            // 降低滚动频率，每20个字符或特殊字符后尝试滚动一次
            const now = Date.now();
            if ((index % 20 === 0 || char === '。' || char === '.' || char === '!' || char === '?') 
                && now - lastScrollAttempt > 300) {  // 最小300ms间隔
                scrollToBottom();  // 非强制滚动，尊重用户操作
                lastScrollAttempt = now;
            }
        } else {
            // 移除光标
            cursor.remove();
            
            // 最终滚动一次，但仍尊重用户滚动状态
            setTimeout(() => scrollToBottom(), 100);
        }
    }
    
    addNextChar();
}

/**
 * 处理图片生成
 * @param {Element} messageElement - AI消息元素
 * @param {Object} params - 生成参数
 */
function handleImageGeneration(messageElement, params) {
    // 移除可能存在的临时状态指示器
    const tempStatus = messageElement.querySelector('.temp-status');
    if (tempStatus) {
        tempStatus.remove();
    }
    
    // 检查是否已存在参数摘要
    let paramSummary = messageElement.querySelector('.params-summary');
    if (paramSummary) {
        // 如果是临时参数摘要，更新其内容
        if (paramSummary.classList.contains('temp-params-summary')) {
            paramSummary.innerHTML = `
                <h4>生成参数</h4>
                <ul>
                    <li>提示词：${params.prompt}</li>
                    <li>图片数量：${params.batch_size || 1}</li>
                    <li>图片尺寸：${params.width || 512}x${params.height || 512}</li>
                    <li>生成步数：${params.steps || 30}</li>
                    <li>提示词引导强度：${params.guidance_scale || 7.5}</li>
                    ${params.sampler_index ? `<li>采样方法：${params.sampler_index}</li>` : ''}
                    ${params.override_settings?.sd_model_checkpoint ? `<li>模型：${params.override_settings.sd_model_checkpoint}</li>` : ''}
                    ${params.enable_hr ? `<li>超分辨率：已启用(2倍)</li>` : ''}
                </ul>
            `;
            paramSummary.classList.remove('temp-params-summary');
        }
    } else {
        // 如果不存在参数摘要，创建一个新的
        paramSummary = document.createElement('div');
        paramSummary.className = 'params-summary';
        paramSummary.innerHTML = `
            <h4>生成参数</h4>
            <ul>
                <li>提示词：${params.prompt}</li>
                <li>图片数量：${params.batch_size || 1}</li>
                <li>图片尺寸：${params.width || 512}x${params.height || 512}</li>
                <li>生成步数：${params.steps || 30}</li>
                <li>提示词引导强度：${params.guidance_scale || 7.5}</li>
                ${params.sampler_index ? `<li>采样方法：${params.sampler_index}</li>` : ''}
                ${params.override_settings?.sd_model_checkpoint ? `<li>模型：${params.override_settings.sd_model_checkpoint}</li>` : ''}
                ${params.enable_hr ? `<li>超分辨率：已启用(${params.hr_scale || 2}倍)</li>` : ''}
            </ul>
        `;
        messageElement.appendChild(paramSummary);
    }
    
    // 检查是否已存在图片网格
    if (messageElement.querySelector('.image-grid')) {
        return; // 如果已经有图片网格，不再重复创建
    }
    
    // 创建图片网格容器
    const imageGrid = document.createElement('div');
    imageGrid.className = 'image-grid';
    
    // 根据batch_size生成占位符
    const batchSize = params.batch_size || 1;
    
    // 添加适当的网格类名
    if (batchSize <= 2) {
        imageGrid.classList.add('grid-2');
    } else {
        imageGrid.classList.add('grid-4');
    }
    
    // 添加占位符
    for (let i = 0; i < batchSize; i++) {
        const placeholderDiv = document.createElement('div');
        placeholderDiv.className = 'image-item';
        placeholderDiv.dataset.index = i;
        
        const placeholder = document.createElement('div');
        placeholder.className = 'image-placeholder';
        
        const spinner = document.createElement('div');
        spinner.className = 'loading-spinner';
        
        placeholder.appendChild(spinner);
        placeholderDiv.appendChild(placeholder);
        imageGrid.appendChild(placeholderDiv);
    }
    
    // 将图片网格添加到消息元素中
    messageElement.appendChild(imageGrid);
    
    // 滚动到底部
    scrollToBottom(true); // 强制滚动
    
    // 设置较长的请求超时
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 180000); // 3分钟超时
    
    // 添加状态指示器
    const statusIndicator = document.createElement('div');
    statusIndicator.className = 'generation-status';
    statusIndicator.innerHTML = '<p>图片生成中，请耐心等待(可能需要1-3分钟)...</p>';
    imageGrid.parentNode.insertBefore(statusIndicator, imageGrid.nextSibling);
    
    // 调用生成API
    fetch('/api/generate', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            params: params,
            session_id: currentSessionId,
            message_id: currentMessageId
        }),
        signal: controller.signal
    })
    .then(response => {
        clearTimeout(timeoutId);
        if (!response.ok) {
            throw new Error(`服务器返回错误: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        // 移除状态指示器
        statusIndicator.remove();
        
        if (data.images && data.images.length > 0) {
            // 更新图片
            data.images.forEach((imageUrl, index) => {
                const imageItem = imageGrid.querySelector(`[data-index="${index}"]`);
                if (imageItem) {
                    // 创建图片元素
                    const img = document.createElement('img');
                    
                    // 处理图片URL路径，确保可以正确加载
                    if (imageUrl.startsWith('http')) {
                        // 外部URL直接使用
                        img.src = imageUrl;
                    } else if (imageUrl.startsWith('/static')) {
                        // 相对于后端的静态路径，需要添加后端URL
                        img.src = window.backendUrl + imageUrl;
                    } else {
                        // 其他情况，使用相对路径
                        img.src = imageUrl;
                    }
                    
                    img.alt = `生成图片 ${index + 1}`;
                    img.addEventListener('load', () => {
                        // 加载完成后替换占位符
                        imageItem.innerHTML = '';
                        imageItem.appendChild(img);
                        
                        // 添加点击预览事件
                        img.addEventListener('click', () => {
                            // 设置预览图片
                            modalImage.src = img.src;
                            
                            // 显示模态框
                            imageModal.classList.add('active');
                        });
                    });
                }
            });
        } else {
            // 显示错误
            imageGrid.innerHTML = `
                <div class="error-message">
                    <div class="error-title">图片生成失败</div>
                    <p>服务器无法生成图片，请稍后再试。</p>
                    <button class="retry-btn">重试</button>
                </div>
            `;
            
            // 添加重试按钮事件
            const retryBtn = imageGrid.querySelector('.retry-btn');
            if (retryBtn) {
                retryBtn.addEventListener('click', () => {
                    // 移除错误消息
                    imageGrid.remove();
                    // 重新处理图片生成
                    handleImageGeneration(messageElement, params);
                });
            }
        }
    })
    .catch(error => {
        // 移除状态指示器
        if (statusIndicator) statusIndicator.remove();
        
        // 区分超时错误与其他错误
        let errorTitle = '网络错误';
        let errorMessage = '图片生成过程中发生网络错误，请检查您的网络连接后重试。';
        
        if (error.name === 'AbortError') {
            errorTitle = '请求超时';
            errorMessage = '图片生成请求超时，可能是因为服务器繁忙。请稍后再试或使用较少的生成步数。';
        } else if (error.message) {
            errorMessage = error.message;
        }
        
        console.error('Error:', error);
        imageGrid.innerHTML = `
            <div class="error-message">
                <div class="error-title">${errorTitle}</div>
                <p>${errorMessage}</p>
                <button class="retry-btn">重试</button>
            </div>
        `;
        
        // 添加重试按钮事件
        const retryBtn = imageGrid.querySelector('.retry-btn');
        if (retryBtn) {
            retryBtn.addEventListener('click', () => {
                // 移除错误消息
                imageGrid.remove();
                // 重新处理图片生成
                handleImageGeneration(messageElement, params);
            });
        }
    });
}

/**
 * 加载会话历史
 * @param {string} sessionId - 会话ID
 * @returns {Promise} - 返回Promise对象，在加载完成后resolve
 */
function loadSessionHistory(sessionId) {
    return new Promise((resolve, reject) => {
        fetch(`/api/history/${sessionId}`)
            .then(response => response.json())
            .then(data => {
                console.log("加载会话历史返回数据:", data);
                
                // 清空聊天区域，移除加载动画
                chatArea.innerHTML = '';
                
                // 如果获取到了模式信息，更新当前模式
                if (data.mode) {
                    currentMode = data.mode;
                    updateUIForMode(currentMode);
                }
                
                // 如果获取到了模型信息，更新当前模型
                if (data.model) {
                    currentModel = data.model;
                    // 更新UI上的模型选择状态
                    if (currentModel === 'deepseek-reasoner') {
                        const reasoningToggle = document.getElementById('reasoningToggle');
                        if (reasoningToggle) {
                            reasoningToggle.classList.add('active');
                        }
                    }
                }
                
                if (data.messages && data.messages.length > 0) {
                    // 显示历史消息
                    data.messages.forEach(msg => {
                        if (msg.role === 'user') {
                            displayUserMessage(msg.content);
                        } else if (msg.role === 'assistant') {
                            const messageElement = displayAIMessage(msg.content);
                            
                            // 如果有推理内容，显示推理内容
                            if (msg.reasoning_content) {
                                displayReasoningContent(messageElement, msg.reasoning_content);
                            }
                            
                            // 如果消息包含生成参数
                            if (msg.generation_params) {
                                console.log("消息包含生成参数:", msg.generation_params);
                                // 创建或获取参数摘要元素
                                let paramSummary = messageElement.querySelector('.params-summary');
                                if (!paramSummary) {
                                    paramSummary = document.createElement('div');
                                    paramSummary.className = 'params-summary';
                                    messageElement.appendChild(paramSummary);
                                }
                                
                                const params = msg.generation_params;
                                // 更新参数摘要内容
                                paramSummary.innerHTML = `
                                    <h4>生成参数</h4>
                                    <ul>
                                        <li>提示词：${params.prompt || '未指定'}</li>
                                        <li>图片数量：${params.batch_size || 1}</li>
                                        <li>图片尺寸：${params.width || 512}x${params.height || 512}</li>
                                        <li>生成步数：${params.steps || 30}</li>
                                        <li>提示词引导强度：${params.guidance_scale || 7.5}</li>
                                        ${params.sampler_index ? `<li>采样方法：${params.sampler_index}</li>` : ''}
                                        ${params.override_settings?.sd_model_checkpoint ? `<li>模型：${params.override_settings.sd_model_checkpoint}</li>` : ''}
                                        ${params.enable_hr ? `<li>超分辨率：已启用(${params.hr_scale || 2}倍)</li>` : ''}
                                    </ul>
                                `;
                            }

                            // 如果消息包含图片
                            if (msg.images && msg.images.length > 0) {
                                console.log("消息包含图片:", msg.images);
                                const imageGrid = document.createElement('div');
                                imageGrid.className = 'image-grid';
                                
                                // 添加网格类名
                                if (msg.images.length <= 2) {
                                    imageGrid.classList.add('grid-2');
                                } else {
                                    imageGrid.classList.add('grid-4');
                                }
                                
                                // 添加图片
                                msg.images.forEach((imageUrl, index) => {
                                    const imageItem = document.createElement('div');
                                    imageItem.className = 'image-item';
                                    imageItem.setAttribute('data-index', index);
                                    
                                    const img = document.createElement('img');
                                    // 处理图片URL路径，确保可以正确加载
                                    if (imageUrl.startsWith('http')) {
                                        // 外部URL直接使用
                                        img.src = imageUrl;
                                    } else if (imageUrl.startsWith('/static')) {
                                        // 相对于后端的静态路径，需要添加后端URL
                                        img.src = window.backendUrl + imageUrl;
                                    } else {
                                        // 其他情况，使用相对路径
                                        img.src = imageUrl;
                                    }
                                    img.alt = `生成图片 ${index + 1}`;
                                    
                                    // 图片加载事件
                                    img.onload = () => {
                                        imageItem.classList.add('loaded');
                                    };
                                    
                                    // 图片加载失败事件
                                    img.onerror = () => {
                                        console.error(`图片加载失败: ${imageUrl}`);
                                        imageItem.classList.add('error');
                                        imageItem.innerHTML = `<div class="error-overlay"><i class="material-icons">broken_image</i><span>图片加载失败</span></div>`;
                                    };
                                    
                                    // 添加点击预览事件
                                    img.addEventListener('click', () => {
                                        // 设置预览图片
                                        modalImage.src = img.src;
                                        
                                        // 显示模态框
                                        imageModal.classList.add('active');
                                    });
                                    
                                    imageItem.appendChild(img);
                                    imageGrid.appendChild(imageItem);
                                });
                                
                                messageElement.appendChild(imageGrid);
                            }
                        }
                    });
                } else {
                    // 如果没有历史消息，显示欢迎消息
                    displayAIMessage('欢迎使用校园图片生成系统！输入描述来生成您想要的校园场景图片，例如"请生成4张图书馆内景的图片"');
                }
                
                // 完成加载，解析Promise
                resolve(data);
            })
            .catch(error => {
                console.error('Error loading history:', error);
                // 清空聊天区域，移除加载动画
                chatArea.innerHTML = '';
                
                // 显示错误消息
                const errorDiv = document.createElement('div');
                errorDiv.className = 'error-message';
                errorDiv.innerHTML = `
                    <div class="error-title">加载失败</div>
                    <p>无法加载会话历史，请刷新页面重试。</p>
                    <button class="retry-btn" onclick="window.location.reload()">刷新页面</button>
                `;
                chatArea.appendChild(errorDiv);
                
                // 拒绝Promise
                reject(error);
            });
    });
}

/**
 * 获取当前时间
 * @returns {string} 格式化的时间字符串
 */
function getCurrentTime() {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    return `${hours}:${minutes}`;
}

/**
 * HTML转义
 * @param {string} text - 需要转义的文本
 * @returns {string} 转义后的文本
 */
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

/**
 * 自动调整文本区域高度
 * @param {HTMLElement} textarea - 文本区域元素
 */
function adjustTextareaHeight(textarea) {
    textarea.style.height = 'auto';
    const newHeight = Math.min(Math.max(textarea.scrollHeight, 50), 150);
    textarea.style.height = `${newHeight}px`;
}

/**
 * 显示提示词建议
 * @param {string} input - 用户当前输入内容
 */
function showPromptSuggestions(input) {
    // 查找或创建提示框
    let suggestionBox = document.querySelector('.prompt-suggestions');
    if (!suggestionBox) {
        suggestionBox = document.createElement('div');
        suggestionBox.className = 'prompt-suggestions';
        document.querySelector('.input-area').appendChild(suggestionBox);
    }

    // 如果输入为空，显示所有提示
    // 否则，筛选包含输入内容的提示
    const suggestions = input.trim() === '' 
        ? promptSuggestions.slice(0, 5) // 为空时显示前5个建议
        : promptSuggestions.filter(suggestion => 
            suggestion.toLowerCase().includes(input.toLowerCase())
          ).slice(0, 5); // 最多显示5个匹配的建议

    // 如果没有匹配的建议，隐藏提示框
    if (suggestions.length === 0) {
        suggestionBox.classList.remove('visible');
        return;
    }

    // 清空并添加新的建议
    suggestionBox.innerHTML = '';
    suggestions.forEach(suggestion => {
        const item = document.createElement('div');
        item.className = 'suggestion-item';
        
        // 提取主题关键词作为标签
        const keywords = ["图书馆", "教学楼", "操场", "校门", "食堂", "实验室", "宿舍", "湖畔", "阅览室", "小路", "体育馆", "四季", "计算机", "音乐厅", "广场"];
        const foundKeyword = keywords.find(keyword => suggestion.includes(keyword)) || "校园";
        
        item.innerHTML = `
            <span class="suggestion-tag">${foundKeyword}</span>
            <span class="suggestion-text">${suggestion}</span>
        `;
        
        item.addEventListener('click', () => {
            userInput.value = suggestion;
            adjustTextareaHeight(userInput);
            suggestionBox.classList.remove('visible');
            userInput.focus();
        });
        
        suggestionBox.appendChild(item);
    });

    // 显示提示框
    suggestionBox.classList.add('visible');
}

/**
 * 切换推理模式
 * @param {boolean} enabled - 是否启用推理模式
 */
function toggleReasoningMode(enabled) {
    // 更新当前模型
    currentModel = enabled ? 'deepseek-reasoner' : 'deepseek-chat';
    
    console.log('切换到模型:', currentModel);
    
    // 更新按钮样式
    const reasoningToggle = document.getElementById('reasoningToggle');
    if (reasoningToggle) {
        if (enabled) {
            reasoningToggle.classList.add('active');
            reasoningToggle.setAttribute('title', '已启用深度思考（点击关闭）');
        } else {
            reasoningToggle.classList.remove('active');
            reasoningToggle.setAttribute('title', '点击启用深度思考');
        }
    }
}

/**
 * 强制下载图片 (保留但不使用，直接使用新窗口方法)
 * @param {string} imageUrl - 图片URL
 * @param {string} fileName - 保存的文件名
 */
function forceDownloadImage(imageUrl, fileName) {
    console.log(`强制下载图片: ${imageUrl} 为 ${fileName}`);
    
    // 直接打开新窗口，用户右键保存
    window.open(imageUrl, '_blank');
}

// 将函数导出为全局函数
window.handleImageGeneration = handleImageGeneration;
window.forceDownloadImage = forceDownloadImage;